<template>
  <div class="stock-statistics-container">
    <div class="header">
      <h2 class="title">{{ stockData.stockName }} ({{ stockData.stockCode }}) 统计详情</h2>
      <div class="header-actions">
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh/></el-icon>
          刷新
        </el-button>
        <el-button type="primary" @click="goBack">
          <el-icon><ArrowLeft/></el-icon>
          返回
        </el-button>
      </div>
    </div>

    <!-- 基本信息卡片 -->
    <el-card class="info-card basic-info">
      <template #header>
        <div class="card-header">
          <el-icon>
            <InfoFilled/>
          </el-icon>
          <span>基本信息</span>
        </div>
      </template>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="info-item">
            <span class="info-label">股票编码</span>
            <span class="info-value code">{{ stockData.stockCode }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="info-label">股票名称</span>
            <span class="info-value name">{{ stockData.stockName }}</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 最新数据卡片 -->
    <el-card class="info-card latest-data">
      <template #header>
        <div class="card-header">
          <el-icon>
            <TrendCharts/>
          </el-icon>
          <span>最新数据</span>
        </div>
      </template>
      <el-row type="flex" :gutter="10" style="flex-wrap: wrap;">
        <div 
          v-for="item in latestDataItems" 
          :key="item.key"
          style="width: 185px; margin: 0 5px 10px 0;"
        >
          <div class="stat-card" :class="{ 'clickable': item.title === '做T收益' }"
                    :style="{ cursor: item.title === '做T收益' ? 'pointer' : 'default' }"
                    @click="item.title === '做T收益' && showTProfitChartDialog('month')">
            <div class="stat-title">{{ item.title }}</div>
            <div class="stat-value">{{ item.value }} <span class="stat-unit" v-if="item.unit">{{ item.unit }}</span></div>
          </div>
        </div>
      </el-row>
    </el-card>

    <!-- 股数构成卡片 例如 1600股 3.41   1600股 4.21 这样-->
    <el-card class="info-card share-composition">
      <template #header>
        <div class="card-header">
          <el-icon>
            <Histogram/>
          </el-icon>
          <span>股数构成</span>
          <div class="sort-controls">
            <el-button-group>
              <el-button
                  size="small"
                  :type="shareSortBy === 'shares' ? 'primary' : 'default'"
                  @click="sortShareByShares"
              >
                按股数
              </el-button>
              <el-button
                  size="small"
                  :type="shareSortBy === 'price' ? 'primary' : 'default'"
                  @click="sortShareByPrice"
              >
                按价格
              </el-button>
              <el-button
                  size="small"
                  @click="toggleShareSortOrder"
              >
                <el-icon>
                  <CaretTop v-if="shareSortOrder === 'asc'"/>
                  <CaretBottom v-else/>
                </el-icon>
                {{ shareSortOrder === 'asc' ? '升序' : '降序' }}
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>
      <div class="share-composition-grid">
        <div
            v-for="(item, index) in sortedShareComposition"
            :key="`${item.shares}-${item.price}`"
            class="share-item"
        >
          <div class="share-item-content">
            <div class="shares">{{ item.shares }}股</div>
            <div class="price">{{ item.price }} <span class="stat-unit">元</span></div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 保本价统计卡片 -->
    <el-card class="info-card break-even-stats">
      <template #header>
        <div class="card-header">
          <el-icon>
            <PriceTag/>
          </el-icon>
          <span>不同股数下的最小保本价</span>
        </div>
      </template>
      <div class="break-even-grid">
        <div
            v-for="(price, shares) in stockData.minBreakEvenPricePerShare"
            :key="shares"
            class="break-even-item"
        >
          <div class="shares">{{ shares }}股</div>
          <div class="price">{{ price }}<span class="stat-unit">元</span></div>
        </div>
      </div>
    </el-card>

    <!-- 股数统计卡片 -->
    <el-card class="info-card shares-stats">
      <template #header>
        <div class="card-header">
          <el-icon>
            <Histogram/>
          </el-icon>
          <span>股数统计</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="stat-card">
            <div class="stat-title">最大总股数</div>
            <div class="stat-value">{{ stockData.maxTotalShares }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card">
            <div class="stat-title">最小总股数</div>
            <div class="stat-value">{{ stockData.minTotalShares }}</div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card current">
            <div class="stat-title">当前股数</div>
            <div class="stat-value">{{ stockData.latestTotalShares }}</div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 收益统计卡片 -->
    <el-card class="info-card profit-stats">
      <template #header>
        <div class="card-header">
          <el-icon>
            <Coin/>
          </el-icon>
          <span>做T收益统计</span>
        </div>
      </template>
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="stat-card clickable"   :class="{ 'profit': stockData.totalTProfit > 0, 'loss': stockData.totalTProfit < 0 }" @click="showTProfitChartDialog('year')">
            <div class="stat-title">总做T收益</div>
            <div class="stat-value">{{ stockData.totalTProfit }} <span class="stat-unit">元</span></div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card clickable" 
               :class="{ 'profit': stockData.currentMonthTProfit > 0, 'loss': stockData.currentMonthTProfit < 0 }" @click="showTProfitChartDialog('month')">
            <div class="stat-title">当月做T总收益</div>
            <div class="stat-value">{{ stockData.currentMonthTProfit }} <span class="stat-unit">元</span></div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card"
               :class="{ 'profit': stockData.maxMonthlyTProfit > 0, 'loss': stockData.maxMonthlyTProfit < 0 }">
            <div class="stat-title">当月做T最大收益</div>
            <div class="stat-value">{{ stockData.maxMonthlyTProfit }} <span class="stat-unit">元</span></div>
          </div>
        </el-col>
        
        <el-col :span="3">
          <div class="stat-card" :class="{ 'profit': stockData.maxTProfit > 0, 'loss': stockData.maxTProfit < 0 }">
            <div class="stat-title">历史最大做T收益</div>
            <div class="stat-value">{{ stockData.maxTProfit }} <span class="stat-unit">元</span></div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="stat-card"
               :class="{ 'profit': stockData.minTProfit > 0, 'loss': stockData.minTProfit < 0 }">
            <div class="stat-title">历史最小做T收益</div>
            <div class="stat-value">{{ stockData.minTProfit }} <span class="stat-unit">元</span></div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 每月收益卡片 -->
    <el-card class="info-card monthly-profit">
      <template #header>
        <div class="card-header">
          <el-icon>
            <Calendar/>
          </el-icon>
          <span>每月做T收益</span>
          <div class="sort-controls">
            <el-button-group>
              <el-button
                  size="small"
                  :type="sortBy === 'month' ? 'primary' : 'default'"
                  @click="sortByMonth"
              >
                按月份
              </el-button>
              <el-button
                  size="small"
                  :type="sortBy === 'profit' ? 'primary' : 'default'"
                  @click="sortByProfit"
              >
                按收益
              </el-button>
              <el-button
                  size="small"
                  @click="toggleSortOrder"
              >
                <el-icon>
                  <CaretTop v-if="sortOrder === 'asc'"/>
                  <CaretBottom v-else/>
                </el-icon>
                {{ sortOrder === 'asc' ? '升序' : '降序' }}
              </el-button>
            </el-button-group>
          </div>
        </div>
      </template>
      <div class="monthly-grid-2x6">
        <div
            v-for="(item, index) in sortedMonthlyData"
            :key="item.month"
            class="monthly-item"
            :class="{
            'positive': item.profit >= 0, 
            'negative': item.profit < 0,
            'top-row': index < 6,
            'bottom-row': index >= 6
          }"
        >
          <div class="month">{{ item.month }}</div>
          <div class="profit">{{ item.profit }}<span class="stat-unit"> 元</span></div>
        </div>
      </div>
    </el-card>

    <!-- 其他统计卡片 -->
    <el-card class="info-card other-stats">
      <template #header>
        <div class="card-header">
          <el-icon>
            <DataAnalysis/>
          </el-icon>
          <span>股价对应天数</span>
          <div class="sort-controls">
            <el-button
                size="small"
                :type="priceDaysSortBy === 'price' ? 'primary' : ''"
                @click="sortPriceDaysByPrice">
              按价格排序
            </el-button>
            <el-button
                size="small"
                @click="togglePriceDaysSortOrder">
              <el-icon>
                <CaretTop v-if="priceDaysSortOrder === 'asc'"/>
                <CaretBottom v-else/>
              </el-icon>
            </el-button>
          </div>
        </div>
      </template>
      <div class="price-days-grid-auto">
        <div
            v-for="(item, index) in sortedPriceDays"
            :key="item.price"
            class="price-day-item-auto"
        >
          <div class="price">{{ item.price }}<span class="stat-unit">元</span></div>
          <div class="days">{{ item.days }} 天</div>
        </div>
      </div>
      <div class="total-info">
        <span>总计：{{ stockData.totalRecords }}条记录</span>
      </div>
    </el-card>

    <!-- 做T收益曲线弹窗 -->
    <el-dialog
      v-model="showTProfitChart"
      :title="`${stockData.stockName} 做T收益曲线`"
      width="80%"
      :before-close="handleCloseChart"
      :align-center="true"
    >
      <TProfitChart 
        :title="`${stockData.stockName} 做T收益曲线`"
        :stockName="stockData.stockName"
        :stockCode="stockData.stockCode"
        :type="tProfitChartType"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  Calendar,
  CaretBottom,
  CaretTop,
  Coin,
  DataAnalysis,
  Histogram,
  InfoFilled,
  PriceTag,
  TrendCharts,
  ArrowLeft, 
  Refresh
} from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { getStockStatistics } from '@/api/stockStatistics'
import { ElMessage } from 'element-plus'
import TProfitChart from '@/components/TProfitChart.vue'

export default {
  name: 'StockStatistics',
  components: {
    InfoFilled,
    TrendCharts,
    Coin,
    Calendar,
    Histogram,
    DataAnalysis,
    PriceTag,
    CaretTop,
    CaretBottom,
    TProfitChart
  },
  data() {
    return {
      sortBy: 'month', // 'month' 或 'profit'
      sortOrder: 'asc', // 'asc' 或 'desc'
      shareSortBy: 'shares', // 'shares' 或 'price'
      shareSortOrder: 'asc', // 'asc' 或 'desc'
      priceDaysSortBy: 'price', // 'price' 或 'days'
      priceDaysSortOrder: 'asc', // 'asc' 或 'desc'
      showTProfitChart: false,
      tProfitChartType: 'year',
      stockData: {
        stockCode: '',
        stockName: '',
        numberTrades: '',
        successRate: '',
        latestTotalShares: 1000,
        latestTProfit: 500.00,
        latestBreakEvenPrice: 350.00,
        latestCurrentPrice: 380.00,
        latestProfitLoss: 30000.00,
        latestMarketValue: 380000.00,
        currentMonthTProfit: 1500.00,
        maxMonthlyTProfit: 1500.00,
        maxTProfit: 200,
        minTProfit: -100,
        monthlyTProfits: {
          '2023-01': 1200.00,
          '2023-02': 800.00,
          '2023-03': 1500.00,
          '2023-04': -200.00,
          '2023-05': 1800.00,
          '2023-06': 2200.00,
          '2023-07': 950.00,
          '2023-08': -450.00,
          '2023-09': 1350.00,
          '2023-10': 2100.00,
          '2023-11': 750.00,
          '2023-12': 2800.00
        },
        totalTProfit: 13000.00,
        maxMonthlyTProfit: 2800.00,
        maxTotalShares: 1200,
        minTotalShares: 800,
        daysWithCurrentPrice: 45,
        totalRecords: 120,
        minBreakEvenPricePerShare: {
          '800': 340.00,
          '1000': 350.00,
          '1200': 360.00
        },
        shareComposition: [
          {
            shares: 6000,
            price: 0.564
          },
          {
            shares: 6000,
            price: 0.602
          }
        ],
        priceDaysMap: {
        }
      }
    }
  },
  computed: {
    sortedShareComposition() {
      const data = [...this.stockData.shareComposition];

      data.sort((a, b) => {
        let compareValue = 0;

        if (this.shareSortBy === 'shares') {
          compareValue = a.shares - b.shares;
        } else if (this.shareSortBy === 'price') {
          compareValue = a.price - b.price;
        }

        return this.shareSortOrder === 'asc' ? compareValue : -compareValue;
      });

      return data;
    },
    sortedMonthlyData() {
      const data = Object.entries(this.stockData.monthlyTProfits).map(([month, profit]) => ({
        month,
        profit
      }));

      data.sort((a, b) => {
        let compareValue = 0;

        if (this.sortBy === 'month') {
          compareValue = a.month.localeCompare(b.month);
        } else if (this.sortBy === 'profit') {
          compareValue = a.profit - b.profit;
        }

        return this.sortOrder === 'asc' ? compareValue : -compareValue;
      });

      return data;
    },
    latestDataItems() {
      return [
        {key: 'shares', title: '总股数', value: this.stockData.latestTotalShares, class: ''},
        {
          key: 'profitloss',
          title: '盈亏',
          unit: '元',
          value: this.stockData.latestProfitLoss,
          class: this.stockData.latestProfitLoss > 0 ? 'profit' : 'loss'
        },
        {key: 'currentPrice', title: '当日价格', value: this.stockData.latestCurrentPrice, unit: '元', class: ''},
        {key: 'breakeven', title: '保本价', value: this.stockData.latestBreakEvenPrice, unit: '元', class: ''},
        {key: 'marketvalue', title: '总市值', value: this.stockData.latestMarketValue, unit: '元', class: ''},
                {
          key: 'tprofit',
          title: '做T收益',
          value: this.stockData.latestTProfit,
          unit: '元',
          class: this.stockData.latestTProfit > 0 ? 'profit' : 'loss'
        },
        {key: 'numberTrades', title: '做T次数', value: this.stockData.numberTrades, unit: '次', class: ''},
        {key: 'successRate', title: '成功率', value: this.stockData.successRate,  unit: '%', class: ''},
        {key: 'date', title: '日期', value: this.stockData.date, class: ''}
      ]
    },
    sortedPriceDays() {
      const data = Object.entries(this.stockData.priceDaysMap).map(([price, days]) => ({
        price: parseFloat(price),
        days
      }));

      data.sort((a, b) => {
        let compareValue = 0;

        if (this.priceDaysSortBy === 'price') {
          compareValue = a.price - b.price;
        } else if (this.priceDaysSortBy === 'days') {
          compareValue = a.days - b.days;
        }

        return this.priceDaysSortOrder === 'asc' ? compareValue : -compareValue;
      });

      return data;
    },
  },
  mounted() {
    // 获取路由参数
    const stockCode = this.$route.query.stockCode
    const stockName = this.$route.query.stockName
    
    if (stockCode) {
      // 如果传递了股票编码，加载该股票的统计数据
      this.stockData.stockCode = stockCode
      this.stockData.stockName = stockName || stockCode
      
      // 调用API加载该股票的详细统计数据
      this.loadStockStatistics(stockCode)
    } else {
      // 如果没有传递参数，可以显示所有股票的统计或提示选择
      this.$message.info('请先选择一个股票')
      this.$router.push('/')
    }
  },
  methods: {
    showTProfitChartDialog(type) {
      this.tProfitChartType = type;
      this.showTProfitChart = true;
    },
    handleCloseChart() {
      this.showTProfitChart = false;
    },
    goBack() {
      this.$router.go(-1)
    },
    sortByMonth() {
      this.sortBy = 'month';
    },
    sortByProfit() {
      this.sortBy = 'profit';
    },
    toggleSortOrder() {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
    },
    sortPriceDaysByPrice() {
      this.priceDaysSortBy = 'price';
    },
    sortPriceDaysByDays() {
      this.priceDaysSortBy = 'days';
    },
    togglePriceDaysSortOrder() {
      this.priceDaysSortOrder = this.priceDaysSortOrder === 'asc' ? 'desc' : 'asc';
    },
    sortShareByShares() {
      this.shareSortBy = 'shares';
    },
    sortShareByPrice() {
      this.shareSortBy = 'price';
    },
    toggleShareSortOrder() {
      this.shareSortOrder = this.shareSortOrder === 'asc' ? 'desc' : 'asc';
    },
    // 在StockStatistics.vue的methods中实现
    loadStockStatistics(stockCode) {
      if (!stockCode) {
        this.$message.warning('股票代码不能为空');
        return;
      }

      // 显示加载状态
      this.loading = true;

      // 调用API获取统计数据
      getStockStatistics(stockCode)
        .then(response => {
          if (response.code === 200 && response.data) {
            const data = response.data;
            
            // 直接更新stockData对象，确保响应性
            if (data.stockInfo) {
              this.stockData.stockCode = data.stockInfo.stockCode;
              this.stockData.stockName = data.stockInfo.stockName;
            }

            // 更新最新数据到stockData
            if (data.latestData) {
              this.stockData.latestTotalShares = data.latestData.totalShares || 0;
              this.stockData.latestTProfit = data.latestData.tprofit || 0;
              this.stockData.latestBreakEvenPrice = data.latestData.breakEvenPrice || 0;
              this.stockData.latestCurrentPrice = data.latestData.currentPrice || 0;
              this.stockData.latestProfitLoss = data.latestData.profitLoss || 0;
              this.stockData.latestMarketValue = data.latestData.marketValue || 0;
              this.stockData.date = data.latestData.date || 0;
              this.stockData.numberTrades = data.latestData.numberTrades || 0;
              this.stockData.successRate = data.latestData.successRate || 0;
            }

            // 更新股数构成到stockData
            if (data.shareComposition && Array.isArray(data.shareComposition)) {
              this.stockData.shareComposition = data.shareComposition;
            }

            // 更新保本价分析到stockData
            if (data.breakEvenPrices && Array.isArray(data.breakEvenPrices)) {
              const breakEvenMap = {};
              data.breakEvenPrices.forEach(item => {
                breakEvenMap[item.shares] = item.breakEvenPrice;
              });
              this.stockData.minBreakEvenPricePerShare = breakEvenMap;
            }

            // 更新收益汇总到stockData
            if (data.profitSummary) {
              this.stockData.totalTProfit = data.profitSummary.totalTProfit || 0;
              this.stockData.currentMonthTProfit = data.profitSummary.currentMonthTProfit || 0;
              this.stockData.maxMonthlyTProfit = data.profitSummary.maxMonthlyTProfit || 0;
              this.stockData.maxTProfit = data.profitSummary.maxTProfit || 0;
              this.stockData.minTProfit = data.profitSummary.minTProfit || 0;
            }

            // 更新股数统计到stockData
            if (data.shareSummary) {
              this.stockData.maxTotalShares = data.shareSummary.maxTotalShares || 0;
              this.stockData.minTotalShares = data.shareSummary.minTotalShares || 0;
              this.stockData.latestTotalShares = data.shareSummary.currentTotalShares || 0;
            }

            // 更新月度收益到stockData
            if (data.monthlyProfits && Array.isArray(data.monthlyProfits)) {
              const monthlyMap = {};
              data.monthlyProfits.forEach(item => {
                monthlyMap[item.month] = item.profit;
              });
              this.stockData.monthlyTProfits = monthlyMap;
            }

            // 更新价格分布到stockData
            if (data.priceDistribution) {
              this.stockData.daysWithCurrentPrice = data.priceDistribution.daysWithCurrentPrice || 0;
              this.stockData.totalRecords = data.priceDistribution.totalRecords || 0;
              
              if (data.priceDistribution.priceDaysList && data.priceDistribution.priceDaysList.length > 0) {
                const priceMap = {};
                data.priceDistribution.priceDaysList.forEach(item => {
                  priceMap[item.price] = item.days;
                });
                this.stockData.priceDaysMap = priceMap;
              }
            }

            this.$message.success('数据加载成功');
          } else {
            this.$message.error(response.message || '获取数据失败');
          }
        })
        .catch(error => {
          console.error('获取股票统计信息失败:', error);
          this.$message.error('获取数据失败: ' + error.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    refreshData() {
      const stockCode = this.$route.query.stockCode
      if (stockCode) {
        this.loadStockStatistics(stockCode)
      }
    },
  }
}
</script>

<style scoped>
.stock-statistics-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 40px);
  padding-top: 116px; /* 新增：为固定header留出空间 */
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 新增：固定定位样式 */
  position: fixed;
  top: 0;
  left: 20px;
  right: 20px;
  z-index: 1000;
  margin-bottom: 0; /* 移除底部margin */
}

.title {
  margin: 0;
  color: #303133;
  font-size: 24px;
  font-weight: bold;
}


.header-actions {
  display: flex;
  gap: 12px;
}

.header-actions .el-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.info-card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2px);
}

.basic-info .info-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

.info-label {
  font-weight: bold;
  color: #606266;
  margin-right: 15px;
  min-width: 80px;
}

.info-value {
  font-size: 16px;
  font-weight: bold;
}

.info-value.code {
  color: #409EFF;
}

.info-value.name {
  color: #67c23a;
}

.stat-card {
  padding: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
  border-radius: 6px;
  text-align: center;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.stat-card.profit {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border-color: #91d5ff;
}

.stat-card.loss {
  background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
  border-color: #ffccc7;
}

.stat-card.current {
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  border-color: #b7eb8f;
}

.stat-title {
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.stat-unit {
  font-size: 11px;
  color: #909399;
  margin-top: 3px;
}

.stat-trend {
  margin-top: 5px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.monthly-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.monthly-item {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.monthly-item.positive {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border: 1px solid #91d5ff;
}

.monthly-item.negative {
  background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
  border: 1px solid #ffccc7;
}

.monthly-item:hover {
  transform: scale(1.05);
}

.month {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.profit {
  font-size: 18px;
  font-weight: bold;
}

.monthly-item.positive .profit {
  color: #67c23a;
}

.monthly-item.negative .profit {
  color: #f56c6c;
}

.break-even-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
}

.break-even-item {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.break-even-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.shares {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.el-col {
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .el-col {
    margin-bottom: 15px;
  }

  .monthly-grid,
  .break-even-grid {
    grid-template-columns: 1fr;
  }
}


.sort-controls {
  margin-left: auto;
}

.monthly-grid-2x6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 15px;
  min-height: 200px;
}

.monthly-item {
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.monthly-item.positive {
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
  border: 1px solid #91d5ff;
}

.monthly-item.negative {
  background: linear-gradient(135deg, #fff2f0 0%, #fff1f0 100%);
  border: 1px solid #ffccc7;
}

.monthly-item:hover {
  transform: scale(1.05);
}

.month {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
  font-weight: bold;
}

.profit {
  font-size: 18px;
  font-weight: bold;
}

.monthly-item.positive .profit {
  color: #67c23a;
}

.monthly-item.negative .profit {
  color: #f56c6c;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

.share-composition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.share-item {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.share-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.share-item-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.share-item .shares {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
  font-weight: bold;
}

.share-item .price {
  font-size: 18px;
  font-weight: bold;
  color: #409EFF;
}

@media (max-width: 768px) {
  .share-composition-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .share-composition-grid {
    grid-template-columns: 1fr;
  }
}

.price-days-list {
  max-height: 300px;
  overflow-y: auto;
}

.price-day-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.price-day-item:last-child {
  border-bottom: none;
}

.price-day-item .price {
  font-weight: bold;
  color: #409EFF;
}

.price-day-item .days {
  color: #666;
}

.total-info {
  text-align: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #999;
}

.sort-controls {
  display: flex;
  gap: 5px;
}

.price-days-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  margin-bottom: 15px;
}

.price-day-item-auto {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 8px;
  text-align: center;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-day-item-auto:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.price-day-item-auto .price {
  font-size: 16px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 5px;
}

.price-day-item-auto .days {
  font-size: 14px;
  color: #606266;
}

@media (max-width: 768px) {
  .price-days-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  .price-day-item-auto {
    padding: 10px;
  }
}

/* 添加可点击的统计卡片样式 */
.clickable {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  border-color: #409eff;
  cursor:  'pointer'
}
</style>